<template>
<div class="foot">
    <div class="contain">
        <ul class="foot-link-ul">
            <li><i class="iconfont icon-weibiaoti554"></i></li>
            <li><i class="iconfont icon-github"></i></li>
            <li><i class="iconfont icon-youtube"></i></li>
            <li><i class="iconfont icon-twitter"></i></li>
            <li><i class="iconfont icon-mianshulogo"></i></li>
            <li><i class="iconfont icon-zhifeiji"></i></li>
            <li><i class="iconfont icon-medium"></i></li>
        </ul>
        <div class="footer-content contain">
            {{this.$t('foot.idea')}}
            <br/>
            {{this.$t('foot.copy')}}
        </div>
    </div>
</div>
</template>

<script>
export default {
  name: 'CommonFoot',
  data () {
    return {
    }
  },
  computed: {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.foot{
    overflow: hidden;
    padding: .5rem 0;
    background: #414141;
    color:$iColor;
    margin-top: $gSpace;
    .footer-content{ 
        width: calc(100% - 328px);
        float: left;
    }
    .foot-link-ul{
        width: 328px;
        float: right;
        margin-bottom: .2rem;
        li{
            float: left;
            margin: 0 .2rem;
            i{
                font-size: .5rem;
                cursor: pointer;
            }
            &:hover{
                color:#fff
            }
        }
    }
}
@media only screen and (min-width:700px) {
    
}
@media only screen and (min-width:180px) and (max-width:700px) {
    
    .foot{
        .footer-content, .foot-link-ul{
            width: 100%;
        }
    }
}
</style>
